<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          时间范围：
          <DatePicker type="daterange"
                      format="yyyy-MM-dd"
                      :confirm="true"
                      :transfer="true"
                      :editable="false"
                      :clearable="false"
                      split-panels
                      @on-ok="DatePickerOK"
                      @on-clear="DatePickerOnClear"
                      @on-open-change="DatePickerOnOpenChange"
                      placement="bottom-start"
                      placeholder="请选择日期"
                      v-model="DatePickerValue"
                      style="width: 200px;"></DatePicker>
          <Button type="primary" class="Button" @click="frequencyFun()">出勤率</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data"></Table>
        </Row>
      </Card>
      <!--出勤率-->
      <Drawer :closable="false" :width="DrawerWidth" v-model="user_retired" class="Drawer-body">
        <p class="Drawer_pStyle">出勤率</p>
        <div class="body frequency-body">
          <div class="table-head">
            月份：
            <DatePicker type="month"
                        format="yyyy-MM"
                        :confirm="true"
                        :transfer="true"
                        :editable="false"
                        :clearable="false"
                        split-panels
                        @on-ok="frequency_DatePickerOK"
                        @on-clear="frequency_DatePickerOnClear"
                        @on-open-change="frequency_DatePickerOnOpenChange"
                        placement="bottom-start"
                        placeholder="请选择月份"
                        v-model="frequency_DatePickerValue"
                        style="width: 200px"></DatePicker>
            &nbsp;&nbsp;
            部门：
            <Select v-model="department" :transfer="true" @on-change="frequency_onChangeDepartment" style="width:200px">
              <Option v-for="item in departmentArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <!--<Row class="margin-top-10 row charts-div">-->
          <div class="charts" id="charts">
            <charts-bar
              v-if="charts_xDataArr.length > 0 && charts_yDataArr.length > 0"
              :visite_volume_id="charts_id"
              :xDataTitle="charts_title"
              :xDataArr="charts_xDataArr"
              :yDataArr="charts_yDataArr"
              :Data_series_name="charts_series_name"
            ></charts-bar>
            <div class="not-charts" v-if="!(charts_xDataArr.length > 0 && charts_yDataArr.length > 0)">
              <div class="show">暂无统计信息</div>
            </div>
          </div>
          <!--</Row>-->
        </div>
        <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}">
          <Button type="text" @click="hidefrequency">取消</Button>
        </div>
      </Drawer>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import chartsBar from '../home/components/chartsBar.vue';
  export default {
    components: {
      chartsBar
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'name',
            title: '姓名',
          },
          {
            key: 'department',
            title: '部门',
          },
          {
            key: 'attendance',
            title: '出勤（天）',
          },
          {
            key: 'late',
            title: '迟到（次）',
          },
          {
            key: 'early',
            title: '早退（次）',
          },
          {
            key: 'vacation',
            title: '请假（次）',
          }
        ],
        data: [],
        dataDetail: {},
        initTable: [],
        DatePickerValue: [],
        from: '',
        to: '',
        // 出勤率
        user_retired: false,
        frequency_DatePickerValue: '',
        Month: '',
        department: 1,
        departmentArr: '',
        charts_id: 'frequency_div_id',
        charts_title: '',
        charts_series_name: '出勤率',
        charts_xDataArr: [],
        charts_yDataArr: [],
        DrawerWidth: Util.constant.DrawerWidth,// 抽屉的宽度
        WindowWidth: Util.constant.WindowWidth,// 窗口的宽度
        WindowHeight: Util.constant.WindowHeight,// 窗口的高度
      };
    },
    mounted () {
      var _this = this;
      // 当前月
      var day1 = new Date();
      var endyear = Utils.fix(day1.getFullYear(), 4);
      var endmonth = Utils.fix(parseInt(day1.getMonth() + 1), 2);
      var endday = Utils.fix(day1.getDate(), 2);
      var from = endyear + "-" + endmonth + "-" + '01';
      var to = Utils.dateToDate(new Date());
      _this.from = from;
      _this.to = to;
      _this.DatePickerValue[0] = from;
      _this.DatePickerValue[1] = to;

      _this.getData();
    },
    methods: {
      DatePickerOK: function () {
        var _this = this;
      },
      DatePickerOnClear: function () {
        var _this = this;
        _this.DatePickerValue[0] = '';
        _this.DatePickerValue[1] = '';
      },
      DatePickerOnOpenChange: function (open) {
        var _this = this;
        if (open == false) {// 关闭了日历
          var DatePickerValue = _this.DatePickerValue;
          var from1 = DatePickerValue[0];
          var to1 = DatePickerValue[1];
          _this.from = from1 == '' ? from1 : Utils.dateToDate(from1);
          _this.to = to1 == '' ? to1 : Utils.dateToDate(to1);

          _this.getData();
        }
      },
      getData () {
        var _this = this;
        if (_this.from == '' || _this.to == '') {
          _this.$Message.error('请选择时间范围!');
          return false;
        }
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          from: _this.from,
          to: _this.to,
          department: 1,
        };
        var params = {
          url: '/clock/statistical/stat',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.data = _data.users || [];
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
      },
      changePage (page) {
        var _this = this;
        console.log('page', page);
        _this.page = page;
        _this.getData();
      },
      show: function (index, data) {
        var _this = this;
        var id = data.id;
        _this.id = id;

      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 出勤率
      frequencyFun: function () {
        var _this = this;
        // 当前月
        var day1 = new Date();
        var endyear = Utils.fix(day1.getFullYear(), 4);
        var endmonth = Utils.fix(parseInt(day1.getMonth() + 1), 2);
        var Month = endyear + "-" + endmonth;
        _this.frequency_DatePickerValue = Month;
        _this.Month = Month;

        _this.frequency_getDepartmentArr();
        _this.frequency_getData();
        _this.user_retired = true;
      },
      // 出勤率
      hidefrequency: function () {
        var _this = this;
        _this.user_retired = false;
      },
      frequency_DatePickerOK: function () {
        var _this = this;
      },
      frequency_DatePickerOnClear: function () {
        var _this = this;
        _this.frequency_DatePickerValue = '';
      },
      frequency_DatePickerOnOpenChange: function (open) {
        var _this = this;
        if (open == false) {// 关闭了日历
          var DatePickerValue = _this.frequency_DatePickerValue;
          if (DatePickerValue && DatePickerValue != '') {
            var day1 = new Date(DatePickerValue);
            var endyear = Utils.fix(day1.getFullYear(), 4);
            var endmonth = Utils.fix(parseInt(day1.getMonth() + 1), 2);
            var Month = endyear + "-" + endmonth;
            _this.Month = Month;
            _this.frequency_getData();
          }
        }
      },
      frequency_onChangeDepartment: function (did) {
        var _this = this;
        _this.department = did;
        _this.frequency_getData();
      },
      frequency_getData () {
        var _this = this;
        if (_this.Month == '') {
          _this.$Message.error('请选择月份!');
          return false;
        }
        _this.charts_xDataArr = [];
        _this.charts_yDataArr = [];
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          date: _this.Month,
          department: _this.department,
        };
        var params = {
          url: '/clock/statistical/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var charts_xDataArr = [];
            var charts_yDataArr = [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var id = _data[k].id;
              var name = _data[k].name;
              var frequency = _data[k].frequency;
              charts_xDataArr.push(name);
              charts_yDataArr.push(frequency);
            }
            var timestamp = new Date().getTime();
            var random = Utils.getRandom();
            _this.charts_id = timestamp + random;
            _this.charts_xDataArr = charts_xDataArr;
            _this.charts_yDataArr = charts_yDataArr;
          } else {
            _this.$Message.error('统计信息失败!');
          }
        }
      },
      frequency_getDepartmentArr () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'all',
        };
        var params = {
          url: '/department/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.departmentArr = [];
            _this.frequency_childrenDate(_data);
          } else {
            _this.$Message.error('查询部门信息失败!');
          }
        }
      },
      frequency_childrenDate: function (Arr) {
        var _this = this;
        for (var k in Arr) {
          if (!Arr[k]) {
            continue;
          }
          var id = Arr[k].id;
          var name = Arr[k].name;
          var children = Arr[k].children || [];
          var obj = {
            id: id,
            name: name,
          };
          _this.departmentArr.push(obj);
          _this.frequency_childrenDate(children);
        }
      },
    }
  };
</script>
